<template>
    <div>
      <my-head>
      </my-head>
      <div style="width: 90%">
        <el-row style="margin: 20px" >
          <el-card >
            <el-col style="margin-right: 10%;height: 50px;width: 10%">
            <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
            </el-col>
            <el-col style="margin-right: 10%;height: 50px;width: 10%">
              课程名称
            </el-col>
            <el-col style="margin-right: 10%;height: 50px;width: 10%">
              学期或课程有效期
            </el-col>
            <el-col style="margin-right: 5%;height: 50px;width: 5%">
              单价（元）
            </el-col>
            <el-col style="margin-right: 5%;height: 50px;width: 10%">
              课程讲师
            </el-col>
            <el-col style="margin-right: 5%;height: 50px;width: 10%">
              操作
            </el-col>
          </el-card>
        </el-row>

        <div style="margin: 20px 0;" v-if="courselist!=null"></div>
        <el-row v-if="show">
          <el-card >
            <h1><router-link to="/">购物车为空,请先添加课程</router-link></h1>

          </el-card>
        </el-row>
        <el-checkbox-group v-if="!show" v-model="checkedCourse" @change="handleCheckedCourseChange">
          <el-checkbox v-for="course in courselist" :label="course" :key="course.id">
            <el-row style="width: 1320px">
            <el-card style="margin-top: 20px;background: whitesmoke;width: 100%">
                <el-col style="width: 20%">
                <el-image fit="fill"  style="width: 300px; height: 125px" :src="course.coursePic"></el-image>
                </el-col>
                <el-col style="width: 20%;margin-top: 20px">
                  <span>{{course.courseName}}</span>
                </el-col>
              <el-col style="width: 10%;margin-top: 10px">
                <span>永久有效</span>
              </el-col>
              <el-col style="width: 30%;margin-top: 10px">
                <span>{{course.pay}}</span>
              </el-col>
              <el-col style="width: 10%;margin-top: 30px">
                <span>{{course.qfTeach!=null?course.qfTeach.teachName:"suiyi"}}</span>
              </el-col>
              <el-col style="width: 10%;margin-top: 30px">
                <span> <el-button type="danger" icon="el-icon-delete" circle @click="delShop(course.id)"></el-button></span>
              </el-col>
            </el-card>
            </el-row>
          </el-checkbox>
        </el-checkbox-group>
        <el-card  style="margin: 20px;width: 1320px ">
          <el-col  style="width: 5%;margin-top:5px">
          <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
          </el-col>
          <el-col style="width: 80%">
            合计：<span style="color: red">{{this.money}}</span>
          </el-col>

          <el-col style="width: 15%;">
            <el-button type="danger" @click="addOrder">结算</el-button>
          </el-col>
        </el-card>
      </div>
      <my-footer></my-footer>
    </div>
</template>

<script>

  import  axios from 'axios'
    export default {
        name: "",
        data(){
          return {
            checkAll: false,
            courselist: [],
            checkedCourse:[],
            isIndeterminate: true,
            money:0.00,
            courseidlist:[],
            show:false

          };
        },
        methods: {
          handleCheckAllChange(val) {
            console.log(val)
            this.checkedCourse = val ? this.courselist : [];
            this.isIndeterminate = false;
            var list=this.courselist;
            if (val==true){
              for (var a = 0;a<list.length;a++){

                this.money=this.money+list[a].pay;
                this.courseidlist.push (list[a].id)
              }
            }else {
              this.money=0.00
              this.courseidlist=[]
            }
          },
          handleCheckedCourseChange(value) {

            this.money=0.00;
            this.courseidlist=[];
            //计算金额
            if (value.length>0){
              for (var a = 0;a<value.length;a++){
                console.log(value[a].pay)
                this.money+=value[a].pay;
                this.courseidlist.push (value[a].id)

              }

            }


            let checkedCount = value.length;
            this.checkAll = checkedCount === this.courselist.length;
            this.isIndeterminate = checkedCount > 0 && checkedCount < this.courselist.length;


            /* if (this.isIndeterminate){
              this.money+=value[0].pay;
            }else if (this.money>0) {
              this.money = this.money-value[0].pay;
            }*/
          },
          //通过token获取用户得购物车信息
          findShopCardByUserToekn () {
            this.$axios.post("/qflive-shopcart/shopcart/findShopCardByToken").then(res => {
              console.log(res.data)
              if (res.data.code==1) {

                this.courselist=res.data.data;
                this.show=false;
              }else{
                this.courseidlist=res.data.data;
                this.show=true;
              }

            })
          },
          //移除购物车
          delShop(id){
            this.$axios.post("/qflive-shopcart/shopcart/delShop",{courseid:id}).then(res=>{
              if (res.data.code==1){
                const h = this.$createElement;
                this.$message({
                  message: h('p', null, [
                    h('span', null, '购物车移除 '),
                    h('i', { style: 'color: teal' }, '成功')
                  ])
                });
                this.findShopCardByUserToekn();
              }
            })
          },
          addOrder(){
            console.log(this.courseidlist)

            this.$axios.post("/qflive-order/order/addOrder",{"courseids":this.courseidlist,"money":this.money}).then(res => {
              console.log(res.data)
              if (res.data.code==1) {

               //跳转到订单页面
                this.$router.push("/confirm")
              }

            })
          }
        },
      mounted(){
          this.findShopCardByUserToekn();
      }
    }
</script>

<style scoped>

</style>
